<template>
  <div class="box class-info-deta-box">
    <div class="box-content">
      <div class="search">
        <div class="search-btn">
          <a-button
            v-if="!(girlLists.length + boyList.length - isDistribution)"
            type="primary"
            :disabled="btnLoading"
            @click="onDormitoryPrecise(true)"
            >重新分配</a-button
          >
          <a-button v-else type="primary" @click="onDormitoryPrecise()">去分配</a-button>
          <!-- <a-button v-if="true" type="primary" @click="onAllocation">去分配</a-button> -->
          <!-- <a-button v-else type="primary" @click="onAllocation">重新分配</a-button> -->
          <!-- <a-button type="primary" @click="consoleLog">打印信息</a-button> -->
          <div class="info">
            <p style="margin-right: 17px" class="class-info-deta-title">{{ className }}：</p>
            <p>
              <span style="margin-right: 24px" class="class-info-deta-title">
                {{ isDistribution }}人已分配
              </span>
              <span style="color: #fe8f8f"
                >{{ girlLists.length + boyList.length - isDistribution }}人未分配</span
              >
            </p>
          </div>
          <a-button
            type="primary"
            :loading="btnLoading"
            style="margin: 0 0 0 16px"
            ghost
            @click="onSumbit"
          >
            保存
          </a-button>
        </div>
      </div>
      <div class="bottom-content">
        <div class="bottom-content-left">
          <a-radio-group v-model:value="checked[0]">
            <a-menu
              v-model:openKeys="expanded"
              v-model:selectedKeys="checked"
              mode="inline"
              style="width: 99%"
              @click="handleNodeClick"
            >
              <a-sub-menu v-for="itemSection in treeData" :key="itemSection.key">
                <template #title> {{ itemSection.sectionName }} </template>

                <a-sub-menu v-for="item in itemSection.childrenClass" :key="item.key">
                  <template #title> {{ item.className }} </template>
                  <a-menu-item v-for="elem in item.childrenClass" :key="elem.key" :value="elem.id">
                    <a-radio :value="elem.key" />
                    <span> {{ elem.className }} </span>
                  </a-menu-item>
                </a-sub-menu>
              </a-sub-menu>
            </a-menu>
          </a-radio-group>
        </div>

        <!-- <a-tree checkable :tree-data="treeData" /> -->
        <div class="bottom-content-right">
          <a-table
            :columns="infoColumns"
            :data-source="paramsAll"
            :row-key="record => record.id"
            :pagination="false"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'bedInfo'">
                <span v-if="!onBedInfo(record).length" class="theme-red">暂未分配</span>
                <span
                  v-else
                  style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 200px;
                    display: inline-block;
                  "
                  class="theme-red"
                  ><Tooltip
                    :overlay-style="{ whiteSpace: 'normal' }"
                    :get-popup-container="
                      triggerNode => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    placement="topLeft"
                    :title="onBedInfo(record).join('、')"
                  >
                    <!-- {{ record.bedInfo.join('、') }} -->
                    {{ onBedInfo(record).join('、') }}
                  </Tooltip>
                </span>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <!-- 宿舍精准分配 提示弹框 -->
    <my-dialog
      :dialog-state="dormitoryAllocation.visible"
      :dialog-title="dormitoryAllocation.title"
      :dialog-width="dormitoryAllocation.width"
      :icon-type="dormitoryAllocation.iconType"
      @handleCancel="dormitoryCancel()"
      @handleOk="dormitoryTip()"
    >
      <template v-slot:location>
        <div class="checkOutStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <span> {{ text }}</span>
        </div>
        <!-- <p class="checkOut-notes">注：此动作将会清除已选内容所有住宿信息，请谨慎操作。</p> -->
      </template>
    </my-dialog>
    <!-- 宿舍精准分配 弹框 -->
    <my-dialog
      :dialog-state="dormitoryPrecise.visible"
      :dialog-title="dormitoryPrecise.title"
      :btn-state="dormitoryPrecise.state"
      :dialog-width="dormitoryPrecise.width"
      :icon-type="dormitoryPrecise.iconType"
      @handleCancel="handleCancel()"
      @handleOk="handleOk()"
    >
      <template v-slot:location>
        <div class="campus">{{ className }}</div>
        <!-- <a-button type="primary" @click="consoleLog">打印信息</a-button> -->
        <div class="content">
          <div class="option">
            <a-tabs v-model:activeKey="dialogActiveKey" style="height: 450px; overflow: auto">
              <a-tab-pane
                :key="sexChoice[0].dataIndex"
                :tab="sexChoice[0].title + '(' + sexChoice[0].num + ')'"
              >
                <div style="overflow: auto; height: 400px">
                  <a-menu v-model:openKeys="openKeysGirl" mode="inline" style="width: 99%">
                    <a-sub-menu v-for="(item, index) in treeDataListGirl" :key="index">
                      <template #title> {{ item.title }} </template>
                      <a-sub-menu
                        v-for="(elem, key) in item.children"
                        :key="`${index}-${key}`"
                        :title="elem.title"
                      >
                        <a-sub-menu
                          v-for="(room, i) in elem.children"
                          :key="`${index}-${key}-${i}`"
                        >
                          <template #title>
                            <a-checkbox
                              v-model:checked="room.checked"
                              :indeterminate="checkboxStyIdent(room)"
                              style="margin-right: 5px"
                              @click.stop
                              @change="onChangeRoomChecked(room, room.children[0], 'girl')"
                            />
                            <Tooltip
                              :overlay-style="{ whiteSpace: 'normal' }"
                              :get-popup-container="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                              placement="topLeft"
                              :title="room.title"
                            >
                              {{ room.title }}
                            </Tooltip>
                          </template>
                          <div style="padding: 0 0 10px 80px">
                            <div class="checkBox">
                              <Row :gutter="[0, 16]">
                                <Col v-for="(num, n) in room.children" :key="n" :span="24">
                                  <div>
                                    <a-checkbox
                                      v-model:checked="num.checked"
                                      :disabled="onDisabledBedGirl(num)"
                                      style="margin-right: 5px"
                                      @change="checkboxChange(room, num, 'girl')"
                                    />
                                    <span> {{ num.title }}号床 </span>
                                  </div>
                                </Col>
                              </Row>
                            </div>
                          </div>
                        </a-sub-menu>
                      </a-sub-menu>
                    </a-sub-menu>
                  </a-menu>
                </div>
              </a-tab-pane>
              <a-tab-pane
                :key="sexChoice[1].dataIndex"
                :tab="sexChoice[1].title + '(' + sexChoice[1].num + ')'"
              >
                <div style="overflow: auto; height: 400px">
                  <a-menu v-model:openKeys="openKeysBoy" mode="inline" style="width: 99%">
                    <a-sub-menu v-for="(item, index) in treeDataListBoy" :key="index">
                      <template #title> {{ item.title }} </template>
                      <!-- 男生 -->
                      <a-sub-menu
                        v-for="(elem, key) in item.children"
                        :key="`${index}-${key}`"
                        :title="elem.title"
                      >
                        <a-sub-menu
                          v-for="(room, i) in elem.children"
                          :key="`${index}-${key}-${i}`"
                        >
                          <template #title>
                            <a-checkbox
                              v-model:checked="room.checked"
                              :indeterminate="checkboxStyIdent(room)"
                              style="margin-right: 5px"
                              @click.stop
                              @change="onChangeRoomChecked(room, room.children[0], 'boy')"
                            />
                            <Tooltip
                              :overlay-style="{ whiteSpace: 'normal' }"
                              :get-popup-container="
                                triggerNode => {
                                  return triggerNode.parentNode || document.body;
                                }
                              "
                              placement="topLeft"
                              :title="room.title"
                            >
                              {{ room.title }}
                            </Tooltip>
                          </template>
                          <div style="padding: 0 0 10px 80px">
                            <div class="checkBox">
                              <Row :gutter="[0, 16]">
                                <Col v-for="(num, n) in room.children" :key="n" :span="24">
                                  <div>
                                    <a-checkbox
                                      v-model:checked="num.checked"
                                      :disabled="onDisabledBedBoy(num)"
                                      style="margin-right: 5px"
                                      @change="checkboxChange(room, num, 'boy')"
                                    />

                                    <span>{{ num.title }}号床 </span>
                                  </div>
                                </Col>
                              </Row>
                            </div>
                          </div>
                        </a-sub-menu>
                      </a-sub-menu>
                    </a-sub-menu>
                  </a-menu>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div class="detailsStudent">
            <div class="info">详情</div>
            <div v-if="dialogActiveKey === '0'" class="info-content">
              <ul class="checkBox">
                <li v-for="(item, i) in girlLists" :key="i" :span="12">
                  <a-checkbox
                    v-model:checked="item.checked"
                    :checked="item.checked"
                    :disabled="item.disabled"
                    @change="checkboxChangeGirl(item)"
                  >
                    <img
                      v-if="item.studentAvatar"
                      :src="item.studentAvatar"
                      alt=""
                      style="width: 32px; height: 32px; border-radius: 50%"
                    />
                    <img v-else src="@/assets/images/accommodation/icon_mrtx.png" alt="" />
                    <span class="name">{{ item.studentName }}</span>
                  </a-checkbox>
                </li>
              </ul>
            </div>
            <div v-else class="info-content">
              <ul class="checkBox">
                <li v-for="(item, i) in boyList" :key="i" :span="12">
                  <a-checkbox
                    v-model:checked="item.checked"
                    :checked="item.checked"
                    :disabled="item.disabled"
                    @change="checkboxChangeBoy(item, $event)"
                  >
                    <img
                      v-if="item.studentAvatar"
                      :src="item.studentAvatar"
                      alt=""
                      style="width: 32px; height: 32px; border-radius: 50%"
                    />
                    <img v-else src="@/assets/images/accommodation/icon_mrtx.png" alt="" />
                    <span class="name">{{ item.studentName }}</span>
                  </a-checkbox>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
    </my-dialog>
    <!-- 保存 提示弹框 -->
    <my-dialog
      :dialog-state="dormitorySave.visible"
      :dialog-title="dormitorySave.title"
      :dialog-width="dormitorySave.width"
      :icon-type="dormitorySave.iconType"
      @handleCancel="dormitorySave.visible = false"
      @handleOk="preservation()"
    >
      <template v-slot:location>
        <div class="checkOutStyle">
          <span> 有未分配的信息，是否确认继续？</span>
        </div>
      </template>
    </my-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, computed, nextTick } from 'vue';
import { Row, Col, Message, message, Tooltip } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import { exactAssignDormitory, getRoomDetails, roomBedList } from '@/api/classManage';
import MyDialog from '@/components/dialog/index.vue';
import { debounce } from '@/utils/debounce.js';
// 多选样式标识
const checkboxStyIdent = computed(() => {
  return val => {
    let boolean = false;
    console.log(val.children);
    if (val.children) {
      let arrLength = val.children.length;
      let arr = val.children.filter(v => v.checked).length;
      if (arr === arrLength) {
        boolean = false;
        val.checked = true;
      }
      if (arr && arr < arrLength) {
        boolean = true;
        val.checked = false;
      }
      if (!arr) {
        boolean = false;
        val.checked = false;
      }
    }
    console.log(boolean);
    return boolean;
  };
});

const girlRoomBedInfo = ref([]);
const boyRoomBedInfo = ref([]);

// 查询房间床位信息
const getRoomBedList = async (data, type) => {
  if (data.length) {
    await roomBedList(data).then(res => {
      console.log(res);
      if (res.data.code === 200) {
        if (type === 'girl') {
          girlRoomBedInfo.value = res.data.data.girlRoomList;
          console.log(res.data.data, '女生宿舍楼');
        }
        if (type === 'boy') {
          boyRoomBedInfo.value = res.data.data.maleRoomList;
          console.log(res.data.data, '男生宿舍楼');
        }
      }
    });
  }
};

const router = useRouter();
const route = useRoute();
const checked = ref([]); // 默认选中的
const expanded = ref([]); // 父
// // 宿舍分配弹窗
const dormitoryAllocation = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default'
});
// 保存 提示弹框
const dormitorySave = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default'
});
const text = ref('');
// 精准分配弹窗
const dormitoryPrecise = reactive({
  title: '宿舍分配',
  visible: false,
  width: '889px',
  iconType: 'default',
  state: '保存'
});
// 宿舍分配弹窗 左侧数据
let dialogActiveKey = ref('0');
const sexChoice = reactive([
  {
    title: '女生',
    dataIndex: '0',
    num: 0,
    data: []
  },
  {
    title: '男生',
    dataIndex: '1',
    num: 0,
    data: []
  }
]);

const onSumbit = function () {
  let studentList = [...studentDistribution.value.girlData, ...studentDistribution.value.boyData];
  let paramsBoy = studentSelectAll.value.filter(elem => elem.studentId);
  console.log(studentList);
  console.log(paramsBoy);
  if (studentList.length !== paramsBoy.length) {
    dormitorySave.visible = true;
    return false;
  }
  preservation();
};

const treeData = ref([]); // 班级树
let girlLists = ref([]); // 女士列表
let boyList = ref([]); // 男士列表
let treeDataListGirl = ref([]);
let treeDataListBoy = ref([]);
let className = ref(''); // 班级名称
let classId = ref(''); // 班级id
const btnLoading = ref(false);
const studentDistribution = ref({}); // 学生分配信息

onMounted(() => {
  console.log(route.query);
  nextTick(() => {
    studentDistribution.value = JSON.parse(localStorage.getItem('STUDENT_DISTRIBUTION'));
    console.log(studentDistribution.value);
    treeData.value = studentDistribution.value.treeData;
    checked.value = [studentDistribution.value.expandedKeys[0]];
    console.log(checked.value);
    // let index = studentDistribution.value.expandedKeys[0].lastIndexOf('-');
    // let selected = studentDistribution.value.expandedKeys[0].substring(0, index);

    expanded.value = studentDistribution.value.expandedKeysNow;
    treeData.value.forEach(itemSection => {
      /* eslint-disable */
      itemSection.childrenClass.forEach(item => {
        // eslint-disable-next-line max-nested-callbacks
        item.childrenClass.forEach(items => {
          if (checked.value.indexOf(items.key) !== -1) {
            classId.value = items.id;
            className.value = itemSection.sectionName + items.gradeName + items.className;
          }
        });
      });
      /* eslint-enable */
    });

    onDistributionData();
    onDormitoryTree();
    getStudentList();
    console.log(expanded.value);
    console.log(treeData.value);
  });
});

// 分配人数
const isDistribution = computed(() => {
  let str = [];
  if (studentDistribution.value.girlData && studentDistribution.value.boyData) {
    let studentList = [...studentDistribution.value.girlData, ...studentDistribution.value.boyData]
      .filter(v => v.classId === classId.value)
      .map(v => v.studentId);
    console.log(studentList);
    console.log(studentSelectAll.value);
    studentSelectAll.value.forEach(v => {
      if (studentList.indexOf(v.studentId) !== -1) str.push(v);
    });
  }
  return str.length;
});

// 分配详情
const onDistributionData = () => {
  let newArr = [];
  let ids = paramsAll.value.map(v => v.roomId);
  JSON.parse(studentDistribution.value.tableData).forEach(v => {
    if (ids.indexOf(v.roomId) === -1) paramsAll.value.push(v);
  });
  paramsAll.value.forEach(v => {
    v.classList.forEach(k => {
      if (k.id === classId.value) newArr.push(v);
    });
  });
  paramsAll.value = newArr;
  console.log(paramsAll.value);
};
// 当前班级宿舍树状结构组装
const onDormitoryTree = async () => {
  let arrGirlList = paramsAll.value.filter(v => v.attribute === '女生宿舍').map(v => v.roomId);
  let arrBoyList = paramsAll.value.filter(v => v.attribute === '男生宿舍').map(v => v.roomId);
  console.log(arrGirlList, arrBoyList, 'arrGirl,arrBoy');
  await getRoomBedList(arrGirlList, 'girl'); // 女生宿舍楼
  await getRoomBedList(arrBoyList, 'boy'); // 男生宿舍楼
  console.log(girlRoomBedInfo.value, boyRoomBedInfo.value, 'all');
  let arrGirl = JSON.parse(JSON.stringify(studentDistribution.value.treeDataListGirl));
  let arrBoy = JSON.parse(JSON.stringify(studentDistribution.value.treeDataListBoy));

  arrGirl.forEach(v => {
    let louGirl = girlRoomBedInfo.value.filter(item => item.dormitoryId === v.dormitoryId);
    console.log(louGirl);
    // louGirl
    v.children.forEach(k => {
      let cengGirl =
        louGirl.length && louGirl[0].storeyList.filter(item => item.storey === k.storey);
      console.log(cengGirl);
      // cengGirl
      k.children.forEach(x => {
        // eslint-disable-next-line max-nested-callbacks
        let fangGirl = cengGirl.length && cengGirl[0].roomList.filter(item => item.roomId === x.id);
        console.log(fangGirl);
        if (fangGirl.length) {
          // eslint-disable-next-line max-nested-callbacks
          let bedList = fangGirl[0].roomBedList.map(item => item.bedId);
          // eslint-disable-next-line max-nested-callbacks
          x.children = x.children.filter(item => bedList.indexOf(item.bedId) !== -1);
        }
        // fang
        // eslint-disable-next-line max-nested-callbacks
        x.classList = x.classList.filter(c => c.id === classId.value);
      });
      k.children = k.children.filter(x => x.classList.length);
    });
    v.children = v.children.filter(x => x.children.length);
  });
  arrBoy.forEach(v => {
    let louBoy = boyRoomBedInfo.value.filter(item => item.dormitoryId === v.dormitoryId);
    // lou
    v.children.forEach(k => {
      let cengBoy = louBoy.length && louBoy[0].storeyList.filter(item => item.storey === k.storey);
      // ceng
      k.children.forEach(x => {
        // fang
        // eslint-disable-next-line max-nested-callbacks
        let fangBoy = cengBoy.length && cengBoy[0].roomList.filter(item => item.roomId === x.id);
        if (fangBoy.length) {
          // eslint-disable-next-line max-nested-callbacks
          let bedList = fangBoy[0].roomBedList.map(item => item.bedId);
          // eslint-disable-next-line max-nested-callbacks
          x.children = x.children.filter(item => bedList.indexOf(item.bedId) !== -1);
        }
        // eslint-disable-next-line max-nested-callbacks
        x.classList = x.classList.filter(c => c.id === classId.value);
      });
      k.children = k.children.filter(x => x.classList.length);
    });
    v.children = v.children.filter(x => x.children.length);
  });
  console.log(arrGirl);
  console.log(arrBoy);
  treeDataListGirl.value = arrGirl.filter(x => x.children.length);
  treeDataListBoy.value = arrBoy.filter(x => x.children.length);
};

const preservation = debounce(function () {
  let paramsBoy = studentSelectAll.value.filter(elem => elem.studentId);
  btnLoading.value = true;
  if (!paramsBoy.length) {
    // router.push({
    //   path: '/admin/classInfo'
    // });
    router.push({
      path: '/admin/usersInfo'
    });
    btnLoading.value = false;
    return false;
  }
  exactAssignDormitory(paramsBoy).then(res => {
    if (res.data.code === 200) {
      message.success('分配成功');
      // router.push({
      //   path: '/admin/classInfo'
      // });
      btnLoading.value = false;
      router.push({
        path: '/admin/usersInfo'
      });
    } else {
      btnLoading.value = false;
      message.error(res.data.msg);
    }
  });
}, 500);
function getStudentList() {
  let girlList = [];
  let boyData = [];
  studentDistribution.value.girlData.forEach(item => {
    if (item.classId === classId.value) {
      girlList.push({
        disabled: true,
        checked: false,
        classId: item.classId,
        studentId: item.studentId,
        studentName: item.studentName,
        studentAvatar: item.studentAvatar
      });
    }
  });
  studentDistribution.value.boyData.forEach(item => {
    if (item.classId === classId.value) {
      boyData.push({
        disabled: true,
        checked: false,
        classId: item.classId,
        studentId: item.studentId,
        studentName: item.studentName,
        studentAvatar: item.studentAvatar
      });
    }
  });
  girlLists.value = girlList;
  boyList.value = boyData;
  sexChoice[0].data = girlLists.value;
  sexChoice[1].data = boyList.value;
  let one = [];
  let two = [];
  sexChoice[0].data.forEach(item => {
    if (item.checked === false) {
      one.push(item);
    }
  });
  sexChoice[1].data.forEach(item => {
    if (item.checked === false) {
      two.push(item);
    }
  });
  sexChoice[0].num = one.length;
  sexChoice[1].num = two.length;
}
function handleNodeClick({ item, key, keyPath }) {
  console.log(item);
  treeData.value.forEach(items => {
    console.log(items);
    items.childrenClass.forEach(items => {
      console.log(items.key + '======' + item.value);
      if (items.id === item.value) {
        className.value = items.gradeName + items.className;
        classId.value = items.id;
      }
    });
  });
  getStudentList();
  let bedId = studentSelectAll.value.filter(x => x.studentId).map(x => x.studentId);
  girlLists.value.forEach(elem => {
    if (bedId.indexOf(elem.studentId) !== -1) {
      elem.checked = true;
      elem.disabled = false;
    } else {
      elem.checked = false;
      elem.disabled = true;
    }
  });
  boyList.value.forEach(elem => {
    if (bedId.indexOf(elem.studentId) !== -1) {
      elem.checked = true;
      elem.disabled = false;
    } else {
      elem.checked = false;
      elem.disabled = true;
    }
  });
  let girlNum = girlLists.value.filter(x => x.checked).length;
  let boyNum = boyList.value.filter(x => x.checked).length;
  sexChoice[0].num = sexChoice[0].num - girlNum;
  sexChoice[1].num = sexChoice[1].num - boyNum;
  onDistributionData();
}
const infoColumns = reactive([
  {
    key: 'dormitory',
    title: '宿舍楼',
    dataIndex: 'dormitory',
    scopedSlots: { customRender: 'dormitory' }
  },
  {
    key: 'floor',
    title: '楼层',
    dataIndex: 'floor',
    scopedSlots: { customRender: 'floor' }
  },
  {
    key: 'roomNum',
    title: '房间号',
    dataIndex: 'roomNum',
    scopedSlots: { customRender: 'roomNum' }
  },
  {
    key: 'attribute',
    title: '属性',
    dataIndex: 'attribute',
    scopedSlots: { customRender: 'attribute' }
  },
  {
    key: 'distributionBedNum',
    title: '分配床位数',
    dataIndex: 'distributionBedNum',
    scopedSlots: { customRender: 'distributionBedNum' }
  },
  {
    key: 'bedInfo',
    title: '床位信息',
    dataIndex: 'bedInfo',
    scopedSlots: { customRender: 'bedInfo' }
  }
]);
function onAllocation() {
  router.push({
    path: '/admin/classInfo/distributionDeta'
  });
}
function dormitoryTip() {
  handleCancelReset();
  dormitoryPrecise.visible = false;
  dormitoryAllocation.visible = false;
}
function dormitoryCancel() {
  dormitoryAllocation.visible = false;
}

/** ******************************************************************* */

const onBedInfo = data => {
  console.log(data.roomId);
  let str = [];
  let arr = studentSelectAll.value.filter(v => v.roomId === data.roomId).map(v => v.studentId);
  let studentList = [...studentDistribution.value.girlData, ...studentDistribution.value.boyData];
  studentList.forEach(v => {
    if (arr.indexOf(v.studentId) !== -1) str.push(v.studentName);
  });
  return str;
};

// 打印信息
const consoleLog = () => {
  console.log(boyBedChesked.value, '男生分配信息/boyBedChesked.value');
  console.log(girlBedChesked.value, '女生分配信息/girlBedChesked.value');
  console.log(studentSelectAll.value, '全部分配信息/studentSelectAll.value');
  console.log(paramsAll.value, '分配信息表格/paramsAll.value');
  console.log(girlLists.value, '女生详情/irlLists.value');
  console.log(boyList.value, '男生详情/boyList.value');
  console.log(treeDataListGirl.value, '女生宿舍/treeDataListGirl.value');
  console.log(treeDataListBoy.value, '男生宿舍/treeDataListBoy.value');
};

// 去分配
const onDormitoryPrecise = async type => {
  console.log(type);
  if (type) {
    console.log(11111111111);
    // let arrGirl = [];
    // let arrBoy = [];
    // let studentList = [...studentDistribution.value.girlData, ...studentDistribution.value.boyData]
    //   .filter(v => v.classId === classId.value)
    //   .map(v => v.studentId);
    // console.log(studentList);
    // boyBedChesked.value.forEach(v => {
    //   if (studentList.indexOf(v.studentId) === -1) arrGirl.push(v);
    // });
    // boyBedChesked.value = arrBoy;
    // girlBedChesked.value.forEach(v => {
    //   if (studentList.indexOf(v.studentId) === -1) arrBoy.push(v);
    // });
    // girlBedChesked.value = arrGirl;
    // studentSelectAll.value = [...arrGirl, ...arrBoy];
    // console.log(studentSelectAll.value);
  }
  await onDormitoryTree();
  let bedId = studentSelectAll.value.filter(x => x.studentId).map(x => x.studentId);
  let ids = studentSelectAll.value.filter(x => x.studentId).map(x => x.bedId);
  console.log(bedId);
  console.log(bedId);
  // girlBedChesked.value = [];
  // boyBedChesked.value = [];
  // let girlIds = JSON.parse(JSON.stringify(girlLists.value.map(v => v.studentId)));
  // let boyIds = JSON.parse(JSON.stringify(boyList.value.map(v => v.studentId)));
  // studentSelectAll.value.forEach(v => {
  //   if (girlIds.indexOf(v.studentId) !== -1) girlBedChesked.value.push(v);
  //   if (boyIds.indexOf(v.studentId) !== -1) boyBedChesked.value.push(v);
  // });
  girlBedChesked.value = girlBedChesked.value.filter(v => bedId.indexOf(v.studentId) !== -1);
  boyBedChesked.value = boyBedChesked.value.filter(v => bedId.indexOf(v.studentId) !== -1);
  girlLists.value.forEach(elem => {
    if (bedId.indexOf(elem.studentId) !== -1) {
      elem.checked = true;
      elem.disabled = false;
    } else {
      elem.checked = false;
      elem.disabled = true;
    }
  });
  boyList.value.forEach(elem => {
    if (bedId.indexOf(elem.studentId) !== -1) {
      elem.checked = true;
      elem.disabled = false;
    } else {
      elem.checked = false;
      elem.disabled = true;
    }
  });

  let girlBedList = girlBedChesked.value.map(v => v.bedId);
  let boyBedList = boyBedChesked.value.map(v => v.bedId);
  console.log(girlBedList);
  console.log(boyBedList);
  treeDataListGirl.value.forEach(v => {
    v.children.forEach(k => {
      k.children.forEach(x => {
        // eslint-disable-next-line max-nested-callbacks
        x.children.forEach(item => {
          if (ids.indexOf(item.bedId) !== -1) {
            item.checked = true;
          }
        });
      });
    });
  });
  treeDataListBoy.value.forEach(v => {
    v.children.forEach(k => {
      // v 宿舍楼
      k.children.forEach(x => {
        // k 楼层
        // eslint-disable-next-line max-nested-callbacks
        x.children.forEach(item => {
          // x 房间
          if (ids.indexOf(item.bedId) !== -1) {
            item.checked = true;
          }
        });
      });
    });
  });

  sexChoice[0].num = girlLists.value.filter(v => !v.checked).length;
  sexChoice[1].num = boyList.value.filter(v => !v.checked).length;

  dormitoryPrecise.visible = true;
};

// 男生/女生菜单展开
const openKeysGirl = ref([]);
const openKeysBoy = ref([]);
// 分配弹窗取消事件重置数据
const handleCancelReset = () => {
  console.log(treeDataListGirl.value);
  // eslint-disable-next-line max-nested-callbacks
  let bedId = studentSelectAll.value.filter(x => x.studentId).map(x => x.bedId);
  treeDataListGirl.value.forEach(k => {
    k.children.forEach(v => {
      v.children.forEach(x => {
        x.checked = false;
        // eslint-disable-next-line max-nested-callbacks
        x.children.forEach(i => {
          i.checked = false;
          if (bedId.indexOf(i.bedId) !== -1) i.checked = true;
        });
      });
    });
  });
  treeDataListBoy.value.forEach(k => {
    k.children.forEach(v => {
      v.children.forEach(x => {
        x.checked = false;
        // eslint-disable-next-line max-nested-callbacks
        x.children.forEach(i => {
          i.checked = false;
          if (bedId.indexOf(i.bedId) !== -1) i.checked = true;
        });
      });
    });
  });
  girlLists.value.forEach(k => {
    k.checked = false;
  });
  boyList.value.forEach(k => {
    k.checked = false;
  });

  let girl = [];
  girlBedChesked.value.forEach(elem => {
    if (bedId.indexOf(elem.bedId) !== -1) girl.push(elem);
  });
  console.log(girl);
  girlBedChesked.value = girl;
  let boy = [];
  boyBedChesked.value.forEach(elem => {
    if (bedId.indexOf(elem.bedId) !== -1) boy.push(elem);
  });
  boyBedChesked.value = boy;
};
// 分配弹窗取消事件
const handleCancel = () => {
  openKeysGirl.value = [];
  openKeysBoy.value = [];
  treeDataListGirl.value.forEach(k => {
    k.children.forEach(v => {
      v.children.forEach(x => {
        x.checked = false;
        // eslint-disable-next-line max-nested-callbacks
        x.children.forEach(i => {
          i.checked = false;
        });
      });
    });
  });
  treeDataListBoy.value.forEach(k => {
    k.children.forEach(v => {
      v.children.forEach(x => {
        x.checked = false;
        // eslint-disable-next-line max-nested-callbacks
        x.children.forEach(i => {
          i.checked = false;
        });
      });
    });
  });

  girlBedChesked.value = [];
  boyBedChesked.value = [];
  let girlIds = JSON.parse(JSON.stringify(girlLists.value.map(v => v.studentId)));
  let boyIds = JSON.parse(JSON.stringify(boyList.value.map(v => v.studentId)));
  JSON.parse(JSON.stringify(studentSelectAll.value)).forEach(v => {
    if (girlIds.indexOf(v.studentId) !== -1) girlBedChesked.value.push(v);
    if (boyIds.indexOf(v.studentId) !== -1) boyBedChesked.value.push(v);
  });

  dormitoryPrecise.visible = false;
};
// 女生/男生选中的床位
const girlBedChesked = ref([]); // 女生已选择床位
const girlBedCheskedLehgth = computed(() => girlBedChesked.value.length);
watch(girlBedCheskedLehgth, () => {
  console.log(girlLists);
  let girlListsLength = girlLists.value.filter(elem => elem.checked).length;
  console.log(girlListsLength);
  if (girlBedChesked.value.length > girlListsLength) {
    girlLists.value.forEach(elem => {
      elem.disabled = false;
    });
  }
  if (
    girlBedChesked.value.length &&
    girlListsLength &&
    girlBedChesked.value.length === girlListsLength
  ) {
    girlLists.value.forEach(elem => {
      if (!elem.checked) elem.disabled = true;
    });
  }
  if (!girlBedChesked.value.length) {
    girlLists.value.forEach(elem => {
      elem.disabled = true;
    });
  }
});
const boyBedChesked = ref([]); // 男生已选择床位
const boyBedCheskedLehgth = computed(() => boyBedChesked.value.length);
watch(boyBedCheskedLehgth, () => {
  let boyListLength = boyList.value.filter(elem => elem.checked).length;
  if (boyBedChesked.value.length > boyListLength) {
    boyList.value.forEach(elem => {
      elem.disabled = false;
    });
  }
  if (boyBedChesked.value.length && boyListLength && boyBedChesked.value.length === boyListLength) {
    boyList.value.forEach(elem => {
      if (!elem.checked) elem.disabled = true;
    });
  }
  if (!boyBedChesked.value.length) {
    boyList.value.forEach(elem => {
      elem.disabled = true;
    });
  }
});
// 女生/男生床位禁用
const onDisabledBedGirl = data => {
  let boolean = false;
  let onCheckedBedStudentId = girlBedChesked.value.filter(x => x.studentId).map(x => x.bedId);
  if (onCheckedBedStudentId.indexOf(data.bedId) !== -1) {
    boolean = true;
  } else {
    boolean = false;
  }
  return boolean;
};
const onDisabledBedBoy = data => {
  let boolean = false;
  let onCheckedBedStudentId = boyBedChesked.value.filter(x => x.studentId).map(x => x.bedId);
  if (onCheckedBedStudentId.indexOf(data.bedId) !== -1) {
    boolean = true;
  } else {
    boolean = false;
  }
  return boolean;
};
// 选择女生回调
const checkboxChangeGirl = data => {
  console.log(data);
  sexChoice[0].num = girlLists.value.filter(elem => !elem.checked).length;
  if (girlLists.value.filter(elem => elem.checked).length === girlBedChesked.value.length) {
    girlLists.value.forEach(elem => {
      if (!elem.checked) elem.disabled = true;
    });
  } else {
    girlLists.value.forEach(elem => {
      elem.disabled = false;
    });
  }
  if (data.checked) {
    console.log(111);
    for (let v of girlBedChesked.value) {
      console.log(222);
      console.log(v);
      if (!v.studentId) {
        v.studentId = data.studentId;
        break;
      }
    }
  } else {
    girlBedChesked.value.forEach(elem => {
      if (elem.studentId === data.studentId) elem.studentId = undefined;
    });
  }
  console.log(girlBedChesked.value);
};
// 男生checkbo事件
const checkboxChangeBoy = data => {
  console.log(data);
  console.log(boyList.value);
  sexChoice[1].num = boyList.value.filter(elem => !elem.checked).length;
  if (boyList.value.filter(elem => elem.checked).length === boyBedChesked.value.length) {
    boyList.value.forEach(elem => {
      if (!elem.checked) elem.disabled = true;
    });
  } else {
    boyList.value.forEach(elem => {
      elem.disabled = false;
    });
  }
  if (data.checked) {
    for (let v of boyBedChesked.value) {
      if (!v.studentId) {
        v.studentId = data.studentId;
        break;
      }
    }
  } else {
    boyBedChesked.value.forEach(elem => {
      if (elem.studentId === data.studentId) elem.studentId = undefined;
    });
  }
  console.log(boyBedChesked.value);
};
// 选择床位回调
const checkboxChange = (room, bed, type) => {
  console.log(room, bed, type);
  if (type === 'girl') {
    if (bed.checked) {
      girlBedChesked.value.push({
        studentId: undefined,
        dormitoryId: bed.louId,
        dormitoryName: bed.lowName,
        roomId: bed.homeId,
        roomName: room.title,
        bedNumber: bed.title,
        bedId: bed.bedId
      });
    } else {
      girlBedChesked.value = girlBedChesked.value.filter(elem => elem.bedId !== bed.bedId);
    }
  }
  if (type === 'boy') {
    if (bed.checked) {
      boyBedChesked.value.push({
        studentId: undefined,
        dormitoryId: bed.louId,
        dormitoryName: bed.lowName,
        roomId: bed.homeId,
        roomName: room.title,
        bedNumber: bed.title,
        bedId: bed.bedId
      });
    } else {
      boyBedChesked.value = boyBedChesked.value.filter(elem => elem.bedId !== bed.bedId);
    }
  }
  console.log(boyBedChesked.value);
  console.log(girlBedChesked.value);
};
// 选择房间
const onChangeRoomChecked = (room, bed, type) => {
  console.log(room);
  if (!room.children.length) {
    // onBedNum(room);
    return false;
  }
  let bedCheckedNum = room.children.filter(elem => elem.checked).length;
  if (room.checked) {
    onCheckedRoomAll(room, bed, type);
  } else {
    if (bedCheckedNum < room.children.length) {
      room.checked = true;
      onCheckedRoomAll(room, bed, type);
      return false;
    }
    if (type === 'girl') {
      let arr = girlBedChesked.value.filter(x => x.studentId).map(x => x.bedId);
      room.children.forEach(elem => {
        if (arr.indexOf(elem.bedId) === -1) {
          elem.checked = false;
        } else {
          elem.checked = true;
        }
      });

      let list = room.children.filter(x => !x.checked).map(x => x.bedId);
      let newList = [];
      girlBedChesked.value.forEach(elem => {
        if (list.indexOf(elem.bedId) === -1) newList.push(elem);
      });
      girlBedChesked.value = newList;
    }
    if (type === 'boy') {
      let arr = boyBedChesked.value.filter(x => x.studentId).map(x => x.bedId);
      room.children.forEach(elem => {
        if (arr.indexOf(elem.bedId) === -1) {
          elem.checked = false;
        } else {
          elem.checked = true;
        }
      });

      let list = room.children.filter(x => !x.checked).map(x => x.bedId);
      let newList = [];
      boyBedChesked.value.forEach(elem => {
        if (list.indexOf(elem.bedId) === -1) newList.push(elem);
      });
      boyBedChesked.value = newList;
    }
  }
};

// 执行房间全选操作
const onCheckedRoomAll = (room, bed, type) => {
  console.log(room, bed, type);
  room.children.forEach(elem => {
    elem.checked = true;
    if (type === 'girl') {
      let arr = girlBedChesked.value.map(x => x.bedId);
      if (arr.indexOf(elem.bedId) === -1) {
        girlBedChesked.value.push({
          studentId: undefined,
          dormitoryId: bed.louId,
          dormitoryName: bed.lowName,
          roomId: bed.homeId,
          roomName: room.title,
          bedNumber: elem.title,
          bedId: elem.bedId
        });
      }
    }
    if (type === 'boy') {
      let arr = boyBedChesked.value.map(x => x.bedId);
      if (arr.indexOf(elem.bedId) === -1) {
        boyBedChesked.value.push({
          studentId: undefined,
          dormitoryId: bed.louId,
          dormitoryName: bed.lowName,
          roomId: bed.homeId,
          roomName: room.title,
          bedNumber: elem.title,
          bedId: elem.bedId
        });
      }
    }
  });
  console.log(girlBedChesked.value);
};
const paramsAll = ref([]); // 分配信息表格
const studentSelectAll = ref([]);
// 分配弹窗确定
const handleOk = () => {
  let boyLists = JSON.parse(JSON.stringify(boyBedChesked.value.filter(elem => elem.studentId)));
  let girlList = JSON.parse(JSON.stringify(girlBedChesked.value.filter(elem => elem.studentId)));
  studentSelectAll.value = [...boyLists, ...girlList];
  console.log(studentSelectAll.value);
  // if (!studentSelectAll.value.length) {
  //   text.value = '班级及学生没有分配';
  //   dormitoryAllocation.visible = true;
  //   return false;
  // }
  // try {
  //   studentSelectAll.value.forEach(elem => {
  //     console.log(elem);
  //     if (!elem.studentId) {
  //       text.value = '班级及学生没有分配';
  //       dormitoryAllocation.visible = true;
  //       throw new Error();
  //     }
  //   });
  // } catch (error) {
  //   return false;
  // }
  let studentInfo = JSON.parse(JSON.stringify(studentSelectAll.value.filter(x => x.studentId)));
  console.log(studentInfo);
  paramsAll.value.forEach(k => {
    // let arr = [];
    k.bedInfo = [];
    studentInfo.forEach(elem => {
      if (elem.roomId === k.roomId) {
        let infoGirl = girlLists.value.filter(x => x.studentId === elem.studentId);
        let infoBoy = boyList.value.filter(x => x.studentId === elem.studentId);
        let info = [...infoGirl, ...infoBoy];
        if (info.length) {
          let str = `${elem.bedNumber}号床(${info[0].studentName})`;
          k.bedInfo.push(str);
          k.bedInfo = [...new Set(k.bedInfo)];
        }
      }
    });
  });
  handleCancelReset();
  studentDistribution.value.noAssigned = studentDistribution.value.noAssigned - studentInfo.length;
  studentDistribution.value.assignedNum = studentInfo.length;
  dormitoryPrecise.visible = false;
};
</script>

<style lang="less" scoped>
.micro-dormitory-tree
  > .micro-dormitory-tree-list
  > .micro-dormitory-tree-list-holder
  > .micro-dormitory-tree-list-holder-inner
  > .micro-dormitory-treenode
  > .micro-dormitory-tree-checkbox {
  display: none;
}
/deep/
  .micro-dormitory-tree
  > .micro-dormitory-tree-list
  > .micro-dormitory-tree-list-holder
  > .micro-dormitory-tree-list-holder-inner
  > .micro-dormitory-treenode
  > .micro-dormitory-tree-checkbox {
  display: none;
}
.box {
  background: #f2f2f2;
  // padding: 50px 120px 24px;
  min-height: 100vh;
  .search-btn {
    display: flex;
    justify-content: space-between;
    .info {
      margin-bottom: 16px;
      padding: 0 16px;
      height: 32px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 16px;
        line-height: 32px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
      }
    }
  }
  .box-content {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;

    .bottom-content {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      .bottom-content-left {
        // width: 208px;
        width: 20%;
        border: 1px solid #e1dddd;
        border-radius: 4px;
        padding: 16px 10px;
        /deep/.micro-dormitory-tree-checkbox-inner {
          border-radius: 50%;
        }
        /deep/.micro-dormitory-tree-checkbox-checked .micro-dormitory-tree-checkbox-inner {
          background: #ffffff;
        }
        /deep/.micro-dormitory-tree-checkbox-checked .micro-dormitory-tree-checkbox-inner::after {
          top: 50%;
          left: 50%;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: @color-test;
          border: 0;
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
          content: ' ';
        }
        /deep/.micro-dormitoryant-tree-checkbox-checked .micro-dormitory-tree-checkbox-inner:hover {
          border: 0px;
        }
      }
      .bottom-content-right {
        // width: 341px;
        width: 79%;
        border: 1px solid #e1dddd;
        border-radius: 4px;
        padding: 24px;
        .info {
          margin-bottom: 16px;
          padding: 0 16px;
          height: 32px;
          background: #f8f8f8;
          border-radius: 4px;
          display: flex;
          justify-content: space-between;
          p {
            font-size: 16px;
            line-height: 32px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            // color: #666666;
          }
        }
        .info-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          div {
            width: 48px;
            height: 24px;
            line-height: 24px;
            background: #fdf4ec;
            border-radius: 4px;
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: center;
            color: @color-test;
          }
        }
      }
    }
  }
}
.campus {
  // width: 64px;
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: #222222;
  line-height: 24px;
  margin-bottom: 16px;
}
.content {
  display: flex;
  justify-content: space-between;
  .option {
    width: 208px;
    border: 1px solid #e1dddd;
    border-radius: 4px;
    /deep/.micro-dormitory-tabs-content-holder {
      width: 95%;
    }
    /deep/ .micro-dormitory-tree-list-holder-inner {
      .micro-dormitory-tree-treenode:nth-child(1) {
        .micro-dormitory-tree-checkbox {
          display: none !important;
        }
      }
      .micro-dormitory-tree-treenode:nth-child(2) {
        .micro-dormitory-tree-checkbox {
          display: none !important;
        }
      }
    }
    .micro-dormitory-tree
      > .micro-dormitory-tree-list
      > .micro-dormitory-tree-list-holder
      > .micro-dormitory-tree-list-holder-inner
      > .micro-dormitory-treenode
      > .micro-dormitory-tree-checkbox {
      display: none;
    }
    /deep/
      .micro-dormitory-tree
      > .micro-dormitory-tree-list
      > .micro-dormitory-tree-list-holder
      > .micro-dormitory-tree-list-holder-inner
      > .micro-dormitory-treenode
      > .micro-dormitory-tree-checkbox {
      display: none;
    }
  }
  .details {
    width: 480px;
    border: 1px solid #e1dddd;
    border-radius: 4px;
    .info {
      height: 46px;
      font-size: 16px;
      line-height: 46px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      color: #222222;
      border-bottom: 1px solid #e1dddd;
      padding-left: 16px;
    }
    .info-content {
      height: 32px;
      display: flex;
      align-items: center;
      padding: 24px 24px;
    }
  }
  .detailsStudent {
    width: 622px;
    border: 1px solid #e1dddd;
    border-radius: 4px;
    .info {
      height: 46px;
      font-size: 16px;
      line-height: 46px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      color: #222222;
      border-bottom: 1px solid #e1dddd;
      padding-left: 16px;
    }
    .info-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
      padding-bottom: 0px !important;
      .checkBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        li {
          /deep/ .micro-dormitory-checkbox-wrapper {
            display: flex;
            align-items: center;
          }
          /deep/ .micro-dormitory-checkbox + span {
            display: flex;
            align-items: center;
          }
          margin-right: 40px;
          margin-bottom: 24px;
          img {
            width: 32px;
            height: 32px;
            margin-left: 16px;
            margin-right: 8px;
          }
        }
      }
    }
  }
}
.checkOutStyle {
  width: 280px;
  height: 72px;
  background: #f8f8f8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 14px;
  img {
    margin-right: 8px;
  }
}

.micro-dormitory-radio-wrapper {
  display: flex !important;
  height: 30px !important;
  line-height: 0 !important;
  align-items: center !important;
}
/deep/.micro-dormitory-tabs-nav {
  padding: 0 10px !important;
}
.micro-dormitory-tabs-tabpane {
  margin-left: 10px !important;
}

.micro-dormitory-tabs-tab-btn {
  font-size: 16px !important;
}

/deep/.micro-dormitory-tree {
  & > span[class^='micro-dormitory-tree-treenode-switcher'] {
    .micro-dormitory-tree-checkbox {
      /* 先把所有的隐藏  x*/
      display: none;
    }
    .micro-dormitory-tree-child-tree {
      .micro-dormitory-tree-checkbox {
        /*  再把指定的二级显示*/
        display: inline-block;
      }
    }
  }
}
/deep/.micro-dormitory-tabs-top > .micro-dormitory-tabs-nav {
  margin: 0;
}

/deep/.micro-dormitory-menu-inline.micro-dormitory-menu-root
  .micro-dormitory-menu-item
  > .micro-dormitory-menu-title-content {
  display: flex;
  align-items: center;
  // justify-content: center;
  padding-left: 60px;
}
/deep/.micro-dormitory-menu-item {
  padding: 0 !important;
  // width: 0;
  margin: 0 auto;
}
/deep/.micro-dormitory-menu-inline .micro-dormitory-menu-item::after {
  display: none;
}
/deep/.micro-dormitory-menu-sub.micro-dormitory-menu-inline {
  background: transparent;
}
/deep/.micro-dormitory-menu:not(.micro-dormitory-menu-horizontal)
  .micro-dormitory-menu-item-selected {
  background: #fdf4ec;
}
/deep/.micro-dormitory-radio-group,
/deep/.micro-dormitory-checkbox-group {
  width: 100%;
  // flex: 1;
}
/deep/.micro-dormitory-radio-wrapper {
  display: flex !important;
  height: 30px !important;
  line-height: 0 !important;
  align-items: center !important;
}

/deep/.micro-dormitory-menu-submenu-title {
  overflow: visible;
}
/deep/.micro-dormitory-tooltip,
/deep/.micro-dormitory-tooltip-placement-topLeft {
  top: -30px !important;
}
::v-deep(.micro-dormitory-radio-wrapper) {
  height: auto !important;
  align-items: flex-start !important;
  line-height: 21px !important;
}
</style>
